<template>
  <div class="myOrder">
    <div class="head">
      <van-field
        class="title"
        label
        left-icon="arrow-left"
        :right-icon="icon_shaixuan"
        input-align="center"
        :value="title"
        @click-left-icon="goBack"
        @click-right-icon="orderClassification"
        readonly
      />
      <!-- 搜索 -->
      <div class="searchFun">
        <div class="searchField">
          <van-field
            v-model="waybill"
            type="number"
            placeholder="input or scan waybaill"
            :left-icon="iconSearch"
            @click-left-icon="queryWaybillTraceAndWaybill"
          />
        </div>
        <div class="scan">
          <div
            class="scanBtn"
            @click="toScan"
          ></div>
        </div>
      </div>
    </div>
    <div
      class="errNull"
      v-if="isBg"
    >
      <div class="backgroundIcon"></div>
      <div class="err_text">我很穷,什么都没有</div>
    </div>
    <div class="list">
      <van-pull-refresh
        v-model="refreshing"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="item"
            v-for="(item, index) in list"
            :key="index"
          >
            <div
              class="base"
              @click="clickOrderItem(item)"
            >
              <van-cell :title=item.pickNumber>

                <template>
                  <van-button
                    size="mini"
                    type="info"
                  >Ks {{item.estimatedFreightCharge}}</van-button>
                  <span class="time">{{item.receivePieceTime}}</span>
                </template>
              </van-cell>
              <div class="itemContent">
                <div class="startCity">
                  <span class="title">{{item.shipMember}}</span>
                  <span class="city">{{item.shipCityName}}</span>
                </div>

                <StateOrder :stateId=item.status></StateOrder>
                <div class="endCity">
                  <span class="title">{{item.receiveMember}}</span>
                  <span class="city">{{item.receiveCityName}}</span>
                </div>
              </div>
            </div>

          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <OrderClassificationPop
      :show="isOrderPop"
      @closePop="closePop"
      @getStatePop="getStatePop"
    ></OrderClassificationPop>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
import StateOrder from './components/stateOrder.vue'
import OrderClassificationPop from '@/components/pop/orderClassificationPop.vue'
import LocalStorage from '../../model/localStorage.js'
import orderMixin from './orderMixin.js'
import scanMixin from '@/views/home/scanMixin'
export default {
  name: 'myOrder',
  // https://www.jianshu.com/p/9f69a80d83f7
  mixins: [orderMixin, scanMixin],
  components: {
    NavBar,
    StateOrder,
    OrderClassificationPop
  },
  data() {
    return {
      title: 'My Orders',
      iconSearch: require('assets/image/icon_search.png'),
      icon_shaixuan: require('assets/image/icon_shaixuan.png'),
      waybill: '',
      list: [],
      loading: false,
      finished: false,
      refreshing: true,
      isOrderPop: false,
      pageSize: 10,
      pageInt: 1,
      state: '0',
      isBg: true
    }
  },
  created() {},
  mounted() {
    // console.log(this.OrderMixinList)
  },
  methods: {
    getStatePop(state) {
      // console.log(state)
      this.state = state
      this.pageInt = 1
      this.offset = 1

      this.list = []
      if (LocalStorage.get('token')) {
        this.getOrderMixinList(state)
      }
    },
    clickOrderItem(item) {
      // alert('clickOrderItem')
      let waybillNumber = item.waybillNumber
      this.$router.push({
        name: 'orderDetails',
        params: {
          id: 1,
          waybillNumber
        }
      })
    },
    closePop() {
      this.isOrderPop = false
    },
    goBack() {
      this.$router.replace({
        path: '/main'
      })
    },
    orderClassification() {
      // alert('分类')
      this.isOrderPop = true
    },

    toScan() {
      // alert('扫描')
      this.scan()
    },
    addNewAddress() {
      this.$router.push({
        name: 'editItem',
        params: {
          id: 3
        }
      })
    },
    add() {
      if (LocalStorage.get('token')) {
        this.getOrderMixinList(this.state)
      } else {
        this.finished = true
      }
    },
    onLoad() {
      // console.log(1)
      //检测 滑动到里底部 就会触发 onLoad 事件 只有将finished  改为 true 不再 触发 onLoad事件
      setTimeout(() => {
        // alert('6')
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
          this.pageInt = 1
          this.offset = 1
        }
        /**
         *  进入 页面 load 执行了 两次  Bug
         */

        this.add()

        this.offset = this.pageSize * this.pageInt + 1
        this.pageInt += 1
        //
        // this.initNum += 1
        // if (this.list.length >= 10) {
        //   //当接口 无结果集的时候 改成 true  不再触发 load 事件
        //   this.finished = true
        // }
      }, 1000)
    },
    queryWaybillTraceAndWaybill() {
      //输入运单号查询调用接口(查轨迹)
      // alert('a')
      this.$router.push({
        name: 'orderDetails',
        params: {
          id: 1,
          waybillNumber: this.waybill
        }
      })
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    }
  }
}
</script>
<style lang="scss" scoped>
@import './myOrder.scss';
</style>